import type { TableProps, FormProps } from "antd";
import { getArticleApi, getSeachApi } from "../../api/user";
import { useEffect, useState } from "react";
import { getAddApi } from "../../api/user";
import { Button, Modal, Checkbox, Form, Input, Space, Table, Tag } from "antd";
import { Drawer } from "antd";
import type { GetProps } from "antd";
import "../../App.css";
function Index() {
  const [data, setData] = useState([]);
  async function getArticle() {
    const res = await getArticleApi();
    console.log(res);
    setData(res.rows);
  }
  useEffect(() => {
    getArticle();
  }, []);
  interface DataType {
    key: string;
    name: string;
    age: number;
    address: string;
    tags: string[];
  }
  //添加
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
    form.resetFields();
  };
  const handleOk = () => {
    setIsModalOpen(false);
  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  //添加form表单
  type FieldType = {
    title: string; //文章标题
    content: string; //文章内容
    tagList: ["HTTP"]; //标签  array[string]
    categoryList: ["HTTP"]; //分类  array[string]
    authorId: 47529555;
    id: number;
  };
  const [form] = Form.useForm();
  const onFinish: FormProps<FieldType>["onFinish"] = async (values) => {
    console.log("Success:", values);
    const res = await getAddApi({
      title: "爱你",
      content: values.content,
      tagList: [values.tagList],
      categoryList: ["肥鹅肝"],
      authorId: 47529555,
      id: values.id,
    });
    console.log(res);
    getArticle();
    setIsModalOpen(false);
    alert("新增成功");
  };

  const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (
    errorInfo
  ) => {
    console.log("Failed:", errorInfo);
  };

  const columns: TableProps<DataType>["columns"] = [
    {
      title: "消息id",
      dataIndex: "id",
      key: "id",
      render: (text) => <a>{text}</a>,
    },

    {
      title: "消息名称",
      dataIndex: "content",
      key: "content",
    },
    {
      title: "消息陈述词",
      dataIndex: "createdAt",
      key: "createdAt",
    },
    {
      title: "创建人",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "创建时间",
      dataIndex: "updatedAt",
      key: "updatedAt",
    },
    // {
    //   title: "Action",
    //   key: "action",
    //   render: (_, record) => (
    //     <Space size="middle">
    //       <a>Invite {record.name}</a>
    //       <a>Delete</a>
    //     </Space>
    //   ),
    // },
  ];
  type SearchProps = GetProps<typeof Input.Search>;
  const { Search } = Input;
  const onSearch: SearchProps["onSearch"] = async (value) => {
    const res = await getSeachApi(value);
    console.log(res);
    setData(res.rows);
  };

  //抽屉
  const [open, setOpen] = useState(false);

  const showDrawer = () => {
    setOpen(true);
  };

  const onClose = () => {
    setOpen(false);
  };
  const zhuti = () => {
    document.body.classList.toggle('brak')
  }
  return (
    <div>
      <div className="img" onClick={showDrawer}></div>
      <Drawer
        title="设置主题颜色"
        closable={{ "aria-label": "Close Button" }}
        onClose={onClose}
        open={open}
      >
        <Button onClick={zhuti}>默认</Button>
        <Button onClick={zhuti}>黑色</Button>
      </Drawer>
      <Search
        style={{ width: 200 }}
        placeholder="输入消息抿成"
        onSearch={onSearch}
        enterButton
      />
      <Search
        style={{ width: 200 }}
        placeholder="输入消息描述词"
        onSearch={onSearch}
        enterButton
      />
      <Button>清除</Button>
      <Button style={{ float: "right" }} type="primary" onClick={showModal}>
        添加消息
      </Button>
      <Modal
        title="添加一条记录"
        closable={{ "aria-label": "Custom Close Button" }}
        open={isModalOpen}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <Form
          form={form}
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
        >
          <Form.Item<FieldType>
            label="id"
            name="id"
            rules={[{ required: true, message: "不能为空" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item<FieldType>
            label="1"
            name="title"
            rules={[{ required: true, message: "不能为空" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item<FieldType>
            label="消息名称"
            name="content"
            rules={[{ required: true, message: "不能为空" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item<FieldType>
            label="消息描述"
            name="tagList"
            rules={[{ required: true, message: "不能为空" }]}
          >
            <Input />
          </Form.Item>
          <Form.Item<FieldType>
            label="1"
            name="categoryList"
            rules={[{ required: true, message: "不能为空" }]}
          >
            <Input />
          </Form.Item>

          <Form.Item label={null}>
            <Button type="primary" htmlType="submit">
              Submit
            </Button>
          </Form.Item>
        </Form>
      </Modal>
      <Table<DataType>
        columns={columns}
        dataSource={data}
        pagination={{
          total: data.length,
          showSizeChanger: true,
          showQuickJumper: true,
          showTotal: (total) => `Total ${total} items`,
        }}
      />
    </div>
  );
}

export default Index;
